<template>
  <div class="collectionForm">
    <el-form ref="collection" :model="collectionForm" :rules="rules">
      <el-form-item label="起租期" prop="startRentDay">
        <el-col :span="6">
          <el-input-number
            v-model="collectionForm.startRentDay"
            :disabled="disabled"
            :controls="false"
            :min="minRentDay+1"
            :precision="0"
            placeholder="输入天数"
          />
        </el-col>
        <el-col :span="3">天起</el-col>
      </el-form-item>
      <el-form-item label="基础收费" prop="unitPrice">
        <el-form-item label="单价：">
          <el-col :span="6">
            <el-input-number
              v-model="collectionForm.unitPrice"
              :controls="false"
              :precision="2"
              placeholder="请输入金额"
            />
          </el-col>
          <el-col :span="3">
            元/天
          </el-col>
        </el-form-item>
      </el-form-item>
      <div class="CUS-JTSF">
        <b class="cus-a">阶梯收费</b>
        <div class="cus-template">
          <!-- 要遍历的div-->
          <div
            v-for="(item, index) in collectionForm.ladderCharge"
            :key="index"
            class="cus-div-1"
          >
            <span class="cus-span-1">阶梯{{ index + 1 }}:</span>
            <b>租赁满</b>
            <!--              <el-form-item
             :prop="`ladderCharge.${index}.begin`"
             :rules="[
               {
                 trigger: ['change', 'blur'],
                 validator: leasevali,
                 index: index
               }
             ]"
           >-->
            <el-form-item
              :prop="`ladderCharge.${index}.begin`"
              :rules="[
                {
                  trigger: ['change','blur'],
                  validator: leasevali,
                  index: index
                }
              ]"
            >
              <el-input-number
                v-model.number="item.begin"
                :controls="false"
                :precision="0"
                :min="1"
                :max="9999"
                placeholder="输入天数"
              />
            </el-form-item>
            <span class="cus-span-1">天</span>
            <span class="cus-span-2">单价:</span>
            <!--              <el-form-item
             :prop="`ladderCharge.${index}.price`"
             :rules="[
               {
                 trigger: ['change', 'blur'],
                 validator: pricevali,
                 index: index
               }
             ]"
           >-->
            <el-form-item
              :prop="`ladderCharge.${index}.price`"
              :rules="[
                {
                  trigger: ['change','blur'],
                  validator: pricevali,
                  index: index
                }
              ]"
            >
              <el-input-number
                v-model.number="item.price"
                :controls="false"
                :precision="2"
                :min="0"
                :max="9999"
                placeholder="输入金额"
              />
            </el-form-item>
            <span class="cus-span-1">元/天</span>
            <el-button
              v-if="collectionForm.ladderCharge.length > 1"
              type="text"
              style="color:red"
              @click="collectionForm.ladderCharge.splice(index, 1)"
            >删除</el-button>
          </div>
        </div>
      </div>
      <div class="cus-btn">
        <el-button
          type="text"
          :disabled="collectionForm.ladderCharge.length == 20"
          @click="heandelSSYuan"
        >添加阶梯收费</el-button>
      </div>
    </el-form>
    <el-button v-if="index!=0" type="danger" circle icon="el-icon-close" style="position: absolute;top: 0;right: 0" @click="delModel(index)" />
  </div>
</template>

<script>
import { Message } from 'element-ui'

export default {
  props: {
    minRentDay: {
      type: Number,
      default: 0
    },
    index: {
      type: Number,
      required: true
    },
    collectionForm: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      disabled: false,
      isValidate: false,
      rules: {
        startRentDay: [{ required: true, message: '请输入起租天数', trigger: 'blur' }],
        unitPrice: [{ required: true, message: '请输入金额', trigger: 'blur' }]
      }
    }
  },
  methods: {
    validate() {
      this.$refs.collection.validate(v => {
        this.isValidate = v
      })
      if (this.collectionForm.ladderCharge.length <= 0) {
        this.isValidate = false
        Message.closeAll()
        Message.error('请至少添加一个阶梯收费')
      }
      return this.isValidate
    },
    /** 添加阶梯收费 */
    heandelSSYuan() {
      this.collectionForm.ladderCharge.push({
        begin: 1,
        price: 1
      })
    },
    setDisabled(disabled) {
      this.disabled = disabled
    },
    /** 删除收费模板*/
    delModel(index) {
      this.$emit('delModel', index)
    },
    pricevali(rules, value, collback) {
      if (value) {
        if (this.collectionForm.unitPrice > value) {
          collback()
        } else {
          collback(new Error('金额必须小于单价的金额'))
        }
      } else {
        collback()
      }
    },
    leasevali(rules, value, collback) {
      if (value) {
        if (rules.index === 0) {
          if (this.collectionForm.startRentDay < value) {
            collback()
          } else {
            collback(new Error('天数必须大于最低限制天数'))
          }
        } else {
          if (
            this.collectionForm.ladderCharge[rules.index].begin >
            this.collectionForm.ladderCharge[rules.index - 1].begin
          ) {
            collback()
          } else {
            console.log(
              this.collectionForm.ladderCharge[rules.index].begin,
              this.collectionForm.ladderCharge[rules.index - 1].begin
            )
            collback(new Error(`当前起租天数大于阶梯${rules.index - 1}的天数`))
          }
        }
      } else {
        collback()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .collectionForm {
    width: 100%;
    border: 1px solid #EEEEEE;
    border-radius: 5px;
    position: relative;
    .CUS-JTSF {
      display: flex;
      .cus-a {
        font-size: 14px;
        width: 100px;
        padding-left: 29px;
        padding-top: 10px;
      }
      .cus-template {
        width: 100%;
        .cus-div-1 {
          font-size: 15px;
          display: flex;
          align-items: center;
          padding-bottom: 25px;
          b {
            width: 60px;
          }
          span {
            display: inline-block;
          }
          .el-form-item {
            margin: 0;
            padding: 0;
          }
          .cus-span-1 {
            width: 70px;
          }
          .cus-span-2 {
            width: 40px;
          }
        }
      }
    }
  }
</style>
